<!DOCTYPE html>
<html lang="en" style="width:100%">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>侧边栏</title>
  <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/jquery"></script>
  <script src="__PUBLIC__/script/bootstrap-treeview-master/dist/bootstrap-treeview.min.js"></script>
  <link rel="stylesheet" href="__PUBLIC__/script/bootstrap-treeview-master/dist/bootstrap-treeview.min.css">
  <link rel="stylesheet" href="__PUBLIC__/node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body style="width:100%">
  <style>
    .treeview span.glyphicon{width:100%;position: absolute;top: 0%;left: 0;right: 0;bottom: 0;}
    .glyphicon-minus:before,.glyphicon-plus:before{position: absolute;top: 30%;left:.5rem;}
    li.list-group-item{padding-left: 1.5rem;}
  </style>
  <div id="manage_nav"></div>
  <script>
    function GetQueryString(name)
    {
         var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
         var r = window.location.search.substr(1).match(reg);
         if(r!=null)return  unescape(r[2]); return null;
    }
    var tree = [
        {
          text: '子账号管理',
          tags: ['2'],
          nodes: [
            {
              text: '子账号列表',
              href: './manage_zizhanghao.html'
            },
            {
              text: '子账号添加',
              href: './add_zizhanghao.html'
            }
          ]
        },
        // {
        //   text: '子渠道管理',
        //   tags: ['2'],
        //   nodes: [
        //     {
        //       text: '子渠道列表',
        //       href: './manage_zi_qudao.html',
        //     },
        //     {
        //       text: '子渠道添加',
        //       href: './add_zi_qudao.html',
        //     }
        //   ]
        // }
    ]
    $(document).ready(function () {
      $('#manage_nav').treeview({
        data: tree,
        color: '#757575',
        onhoverColor: '#EAEFF5',
        searchResultColor: '#fff',
        searchResultBackColor: '#007CB8'
      })
      var manage_nav = $('#manage_nav').treeview(true)
      $('#manage_nav').on('click', function(e){
        var id = e.target.getAttribute('data-nodeid') || e.target.parentElement.getAttribute('data-nodeid')
        var url = manage_nav.getNode(id).href
        window.top.postMessage({url: url}, '*')
      })
      var match = {
        zizhanghao_m: '子账号列表',
        zizhanghao_a: '子账号添加',
        ziqudao_m: '子渠道列表',
        ziqudao_a: '子渠道添加'
      }
      var url_p = GetQueryString('local')
      $('#manage_nav').treeview('search', match[url_p])[0]
    })
  </script>
</body>
</html>